<template>
  <div ref="linerChartEl" class="line-chaert-box"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, onMounted, toRaw, watch } from "vue";
import { getLineChartDataApi } from "@/api/container";
const chartDataInfo = ref([]);
const linerChartEl = ref(null);
const lineOption = async () => {
  // 确认可以获取到data中的数据以用来渲染折线图
  try {
    const res = await getLineChartDataApi();
    // console.log(res);
    chartDataInfo.value = res.data;
    // console.log(data.value);;
  } catch (error) {
    console.log(error);
  }
  // console.log(1);
};

watch(
  () => chartDataInfo.value,
  (val) => {
    if (val) {
      // console.log(val.map((item) => {
      //   return {
      //     data:item.val
      //   }
      // }));
      // console.log(3);
      // console.log(
      //   val.map((item) => {
      //     return { info: item.val };
      //   })
      // );
      // console.log(val.val);

      // console.log(val);
      // console.log(val.val);
      // console.log(val.x);
      // console.log(val.val.map((item) => {
      //   console.log(item);
      //     return {
      //       data: item,
      //     };
      //   }))

      // const option = {
      //   title: {
      //     text: "商品信息表",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     data: val.x,
      //   },
      //   yAxis: {
      //     type: "value",
      //   },
      // series: val.val.map((item) => {
      //   return {
      //     type: "line",
      //     stack: "Total",
      //     data: item,
      //   };
      // }),
      // };
      // console.log(option.series);

      const option = {
        title: {
          text: "商品信息",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: val.x,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: val.val.map((item) => {
          return {
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: item,
          };
        }),
      };

      //   const colorListZero = [[128, 255, 165],[0, 221, 255],[55, 162, 255],[255, 0, 135]]

      //   const colorListOne = [[1, 191, 236],[77, 119, 255],[116, 21, 219],[135, 0, 157]]

      // // 折线图数据(备)
      // const option = {
      //   color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087"],
      //   title: {
      //     text: "商品信息表",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "cross",
      //       label: {
      //         backgroundColor: "#6a7985",
      //       },
      //     },
      //   },
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   xAxis: [
      //     {
      //       type: "category",
      //       boundaryGap: false,
      //       data: val.x,
      //     },
      //   ],
      //   yAxis: [
      //     {
      //       type: "value",
      //     },
      //   ],
      //   series:
      //     val.val.map((item) => {
      //       return {
      //         type: "line",
      //         stack: "Total",
      //         smooth: true,
      //         lineStyle: {
      //           width: 0,
      //         },
      //         showSymbol: false,
      //         areaStyle: {
      //           opacity: 0.8,
      //           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //             {
      //               offset: 0,
      //               color: `rgb(${colorListZero[0]})`,
      //             },
      //             {
      //               offset: 1,
      //               color: `rgb(${colorListOne[0]})`,
      //             },
      //           ]),
      //         },
      //         emphasis: {
      //           focus: "series",
      //         },
      //         data: item,
      //       };
      //     }),

      // };
      // console.log(option.series);
      // console.log(option.series.data);
      const res = linerChartEl.value;
      // console.log(res);
      const myChart = echarts.init(res);
      // console.log(option.series[0].data);
      option && myChart.setOption(option);
    }
  }
),
  { immediate: true };
onMounted(() => {
  lineOption();
  // console.log(2);
});
</script>
<style lang="scss">
.line-chaert-box {
  width: 1000px;
  height: 400px;
  color: rgb(84, 248, 248);
  color: rgb(126, 252, 210);
}
</style>
